<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>地址管理</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
		
		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/addstyle.css" rel="stylesheet" type="text/css">
		<link href="../css/bootstrap.css">
		
	
		<link rel="stylesheet" type="text/css" href="../css/adress.css"/>
		<script type="text/javascript" src="../js/vue2.5.js" ></script>
		<script type="text/javascript" src="../js/axios.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="../js/global.js" ></script>
		<script type="text/javascript" src="../js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script src="../js/param.js"></script>
		<script src="../js/jquery-1.11.2.min.js"></script>
		<script src="../js/distpicker.data.js"></script>
		<script src="../js/distpicker.js"></script>
		<script src="../js/main.js"></script>
		
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<style>
			.adress{
				display:inline-block;
			}
			.s1{
				padding:10px;
				margin-bottom:20px
			}
			.s2{
				display:inline-block;
				width:20%;
				float:left;
				height:34px;
				
			}
			.s3{
				display:inline-block;
				width:80%;
				float:left;
			}
			.s4{
				width:100%;
				border:1px solid #ccc;
				outline:none;
				display: block;
				  height: 34px;
				  padding: 6px 12px;
				  font-size: 14px;
				  line-height: 1.42857143;
				  color: #555;
				  background-color: #fff;
				  background-image: none;
				  border: 1px solid #ccc;
				  border-radius: 4px;
				  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
				       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
				          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			}
			.s4:focus{
				 border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
			}
		
		</style>

	</head>

	<body>
		<div class="container">
		<div class="nav-table">
			<div class="long-title"><span class="all-goods">全部分类</span></div>
			<div class="nav-cont">
				<ul>
							<li class="index"><a href="../index.html">首页</a></li>
							<li class="qc"><a href="text.html">推荐</a></li>
							<li class="qc"><a href="../home/search.html">搜索</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="about.html">我们</a></li>
				</ul>
				
			</div>
		</div>
		<b class="line"></b>

		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-address">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
						</div>
						<hr/>
						<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails adress-context">

							<li class="user-addresslist " v-for="(adress,index) in adressData">
								<span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
								<input type="hidden" class="aid" id="aid" name="aid" v-model="adress.aid">
								<p class="new-tit new-p-re">
									<span class="new-txt">{{adress.uname}}</span>
									<span class="new-txt-rd2">{{adress.phone}}</span>
								</p>
								<div class="new-mu_l2a new-p-re">
									<p class="new-mu_l2cw">
										<span class="adress1">{{adress.adress1}}&nbsp;</span>
										<span class="street">{{adress.adress2}}</span></p>
								</div>
								<div class="new-addr-btn">
									<a href="#" @click="get(adress.aid,index)"><i class="am-icon-edit"></i>编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);"  @click="remove(adress.aid,index)"><i class="am-icon-trash"></i>删除</a>
								</div>
							</li>
						</ul>
						<div id="motai" style="display:none;">
							
							<div class="s1">
								<label  class="s2">收货人</label>
								<div class="s3">
									<input type="text" class="s4"  v-model="adress.uname" >
								</div>
							</div>
							<div class="s1">
								<label  class="s2 ">手机号码</label>
								<div class="s3">
									<input type="text" class="s4"  v-model="adress.phone">
								</div>
							</div>
							<div class="s1">
								<label  class="s2">所在地</label>
								<div class="s3">
									<input type="text" class="s4" v-model="adress.adress1">
								</div>
							</div>
							<div class="s1">
								<label  class="s2 ">详细地址</label>
								<div class="s3">
									<input type="text" class="s4" v-model="adress.adress2">
								</div>
							</div>
							<div class="s1">
								<div class="am-u-sm-9 am-u-sm-push-3">
									<input type="button" value="修改" @click="update()" class="am-btn am-btn-danger">
									<a href="javascript:;" onclick="window.parent.layer.closeAll();" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
								</div>
							</div>
							
						</div>
						
						
						<div class="clear"></div>
						<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
						<!--例子-->
						<div class="am-modal am-modal-no-btn" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
								</div>
								<hr/>

								<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
									<form class="am-form am-form-horizontal">

										<div class="am-form-group">
											<label for="user-name" class="am-form-label">收货人</label>
											<div class="am-form-content">
												<input type="text"  placeholder="收货人"  id="uname" name="uname">
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-phone" class="am-form-label">手机号码</label>
											<div class="am-form-content">
												<input id="phone" name="phone" placeholder="手机号必填" type="email">
											</div>
										</div>
										
										<div class="add-adress">
								
											<label for="" class="adress-lable am-form-label">所在地</label>
											 <div data-toggle="distpicker" class="suozaidi">
										        <div class="adress">
										          <select class="form-control" id="province2" data-province="---- 选择省 ----"></select>
										        </div>
										        <div class="adress">
										          <select class="form-control" id="city2" data-city="---- 选择市 ----"></select>
										        </div>
										        <div class="adress">
										          <select class="form-control" id="district2" data-district="---- 选择区 ----"></select>
										        </div>
										      </div>
											
										</div>
											
										<div class="am-form-group">
											<label for="user-intro" class="am-form-label">详细地址</label>
											<div class="am-form-content">
												<textarea class="" rows="3"  id="adress2" name="adress2" placeholder="输入详细地址"></textarea>
												<small>100字以内写出你的详细地址...</small>
											</div>
										</div>

										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a class="am-btn am-btn-danger" @click="addAdress()">保存</a>
												<a @click="clearInput()" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>

					</div>

					

					<div class="clear"></div>

				</div>
				<!--底部-->
				<div class="footer">
					<div class="footer-hd">
						<p>
							
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 xxxxxx <a href="http://www.cssmoban.com/" target="_blank" title=""></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
						</p>
					</div>
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="person/index.html"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<!--管理员界面-->
					<li class="person">
						<p><i class="am-icon-qq"></i>管理系统</p>
						<ul>
							<li> <a href="querygoods.html">商品管理</a></li>
							<li> <a href="queryorder.html">订单管理</a></li>		
							
						</ul>
					</li>
					<!--普通界面-->
					<li class="person">
						<p><i class="am-icon-newspaper-o"></i>个人资料</p>
						<ul>
							<li> <a href="information.html">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li> <a href="address.html">地址管理</a></li>
							
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-balance-scale"></i>我的交易</p>
						<ul>
							<li><a href="order.html">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
							<li> <a href="comment.html">评价商品</a></li>
						</ul>
					</li>
					
					<li class="person">
						<p><i class="am-icon-tags"></i>我的收藏</p>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
																		
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-qrcode"></i>在线客服</p>
						<ul>
							<li> <a href="suggest.html">意见反馈</a></li>		
							<li> <a href="news.html">我的消息</a></li>
						</ul>
					</li>
					
				</ul>

			</aside>
		</div>
		</div>
		<script>
		var uid = localStorage.getItem('id');
		var vue = new Vue({
			el:'.container',
			data:{
				adressData:[],
				adress:{}
			},
			methods:{
				
				query:function(){
					axios.get(baseUrl + '/adress/query',{
						params:{
							uid:uid
						}
					})
						.then(function(response) {
							
							this.adressData = response.data;
							
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
				},
				get:function(aid){
					axios.get(baseUrl + '/adress/get',{
						params:{
							aid:aid
						}
					})
						.then(function(response) {
							this.adress = response.data;
							
						}.bind(this))
						.catch(function(error) {
							layer.msg('请求失败');
						});
					
					layer.open({
						title:'修改地址',
					    type: 1,				   
					    area: ['420px', '400px'], //宽高
					    content: $('#motai')
					});
				},
				addAdress:function(){
					if (!checkForm())
						return;
					
					 axios.get( baseUrl + '/adress/add',{ 
						 params:{
							uname:$('#uname').val(),
							phone:$('#phone').val(),
							adress1 : $("#province2 option:selected").text()+"-"+$("#city2 option:selected").text()+"-"+$("#district2 option:selected").text(),
							adress2: $("#adress2").val(),
							uid:uid
						}
					})
					.then(function(response) {
						layer.msg('增加地址成功');
						location.reload();
						
					})
					.catch(function(error) {
						layer.msg('增加地址失败');
					}); 

				},
				remove:function(aid,index){
					if(!window.confirm('确定删除地址？'))
						return;
					//ajax
					axios.get(baseUrl + '/adress/delete',{
							params:{
								aid:aid
							}
						})
						.then(function(response) {
							this.adressData.splice(index,1);
							layer.msg('删除地址成功！');
						}.bind(this))
						.catch(function(error) {
							layer.msg('删除地址失败');
						});
				},
				clearInput:function(){
					$('#uname').val("");
					$("#phone").val("");
					$("#adress2").val("");
					
				},
				update:function(){
					
					axios.post(baseUrl + '/adress/update', $.param(this.adress))
					.then(function(response) {
						layer.msg('更新成功');
						window.parent.layer.closeAll();
						location.reload();
					})
					.catch(function(error) {
						layer.msg('请求失败');
						
					});
					
				}
				
				
			},
			mounted:function(){
				this.query();
				
				
			}	
		});	
		
		//表单验证函数
		function checkForm() {

			//收件人
			var uname = $('#uname');

			if (uname.val() == '' ) {
				layer.msg('收件人不能为空，');
				uname.focus();
				return false;
			}

			

			//手机验证
			var Phone = $('#phone');
			r = /^1[3-9]\d{9}$/;

			if (r.test(Phone.val()) != true || Phone.val() == '') {
				layer.msg('手机格式不正确');
				Phone.focus();
				return false;
			}

			return true;
		}
		
	 	
		$(".adress-context").on('click','.user-addresslist .new-option-r' , function(){
				
				$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
				$(this).text("设为默认");
				
				var aid = $(this).siblings('.aid').val();
				localStorage.setItem("aid",aid);	
				var adress = $(this).siblings('.new-mu_l2a').find('.adress1').text()+" "+ $(this).siblings('.new-mu_l2a').find('.street').text();
				localStorage.setItem("adress",adress);	
				var uname = $(this).siblings('.new-tit').find(".new-txt").text();
				localStorage.setItem("uname",uname);
				var phone = $(this).siblings('.new-tit').find(".new-txt-rd2").text();
				localStorage.setItem("phone",phone);	
				
		}); 
	
		$(document).ready(function() {							
			$(".new-option-r").click(function() {
				$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
			});
			
			var $ww = $(window).width();
			if($ww>640) {
				$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
			}
		
			
		})
	
	</script>
	</body>

</html>